<!doctype html>
<html lang="en" style="background:pink;">
<head>
	<meta charset="UTF-8">
	<title>js</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}

		 #imgid{
			width:120px; 
			height:120px;
			top:0px;
			left:0px;
			position: absolute;/* 定位：脱离文档流,body的高度就不存在了 */
			/* overflow: hidden; */
			
		} 

		 #imgid img{
		 	width:120px; height:120px;
			display: block;
		}
	</style>
</head>
<body style="background:pink;">
	<div id="imgid">
		<img src="q.jpg" alt="" style="">
	</div>
	
</body>

<script>
//html占满整个屏幕
//body是实体，是一个div。


	imgobj=document.getElementById('imgid');

	//可视区域高
	screenHeight=document.documentElement.clientHeight;
	imgHeight=120;//图片的高度
	diffHeight=screenHeight-imgHeight;//差值。有效高度-图片的高度

	//可视区域宽
	screenWidth=document.documentElement.clientWidth;
	imgWidth=120;//图片的高度
	diffWidth=screenWidth-imgWidth;//差值。有效高度-图片的宽度

	//alert(imgid);//也可以生成div元素对象
	ys=0;
	yv=10;

	xs=0;
	xv=10;
	setInterval(function(){

		//y轴
		ys+=yv;
		if(ys>=diffHeight){
			ys=diffHeight;
			yv=-yv;
		}
		if(ys<=0){
			yv=-yv;//yv=-(-10)
		}
		document.title=ys+'-'+diffHeight;
		imgobj.style.top=ys+'px';

		//x轴
		xs+=xv;
		if(xs>=diffWidth){
			xs=diffWidth;
			xv=-xv;
		}
		if(xs<=0){
			xv=-xv;//xv=-(-10)
		}
		document.title=xs+'-'+diffWidth;
		imgobj.style.left=xs+'px';


	},100)
	
	//小球到最下方出现滚动条的原因
	//图片对应div设置overflow:hidden 或者 img上加display:block;

	/*
		p标标签里：图片会和文字对齐，有一些文字下边会多一个勾，如：g,j。图片和文字对其，就会多4px
		img是行标签，将它变为快标签，外加的高度4，就会消失
		

		浏览器遗留问题
		1.一个div中有一个img图片,图片img会使外边的div高度加5
		2.img是行标签，将它变为快标签，外加的高度4，就会消失
		为了避免这种情况，会在img上加display:block;

		场景：
		如果一个div中有一个图片，如果div图片不给宽高，也不给overflow:hidden,那么这个图片，会顶4px

		解决办法
		1.把图片装到同等大小的div里面，div设置overflow:hidden 或者 img上加display:block;
		2.最佳办法：一般是img上加display:block; 不让图片外沿5px  #imgid img{display:block;}

		习惯：图片一般都是外边加一个div，div宽高和图片宽高一样,并且图片本身加display:block。就不会出现4px的高度了。
		外边加div的原因：块标签独占一行，如果不在外边套一个div,图片就会占满整行。所以外边套的div要设置和图片同样的宽度和高度

	*/
</script>
</html>